<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志展示</title>\

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
    layui.use("table",function () {
        var table = layui.table;
        table.render({
            id:"log",
            elem:"#demo",
            cols:[[
                {field:"logId",title:"日志编号",sort:true},
                {field:"username",title:"管理员"},
                {field:"logDate",title:"时间"},
                {field:"logIp",align:"center",title:"ip地址"},
                {field:"logType",title:"类型"},
                {field:"logContent",title:"操作"}
            ]],
            url:"${pageContext.request.contextPath}/cmfzlog/showPage",
            page:true,//开启分页
            limits:[5,10,20],//每页条数的选择项
            limit:5,//每页显示的条数，默认是10
            toolbar:"#toolbar"
        });
    })
</script>
<script type="text/html" id="toolbar">
    <div class="layui-inline">
        <form action="" class="layui-form" lay-filter="search">
            <div class="layui-inline">
                <div class="layui-inline">
                    <label class="layui-form-label">条件</label>
                    <div class="layui-input-block">
                        <select name="option" lay-verify="required">
                            <option value="username">管理员</option>
                            <option value="log_ip">ip地址</option>
                            <option value="log_type">类型</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-input-inline">
                <input type="text" name="search" id="search" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button onclick="handleSearch()" type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-search"> </i></button>
            </div>
        </form>
    </div>
</script>
<script type="text/javascript">
    function handleSearch(){
        layui.use(["form","table"],function(){
            var form = layui.form;
            var table = layui.table;
            var formData = form.val("search");
            var $ = layui.$;
            console.log(formData);

            table.reload("log",{
                url:"${pageContext.request.contextPath}/cmfzlog/showPage",
                where:{
                    "search":formData.search,
                    "option":formData.option,
                }
            })
            $("#search").val(formData.search);
            $("#option").val(formData.option);
        })
    }


</script>
</body>
</html>